<template>
	<view class="container">
		<view @click="navDetail(detail)" class="tui-order-item">
			<view class="tui-goods-item">
				<image :src="detail.productCoverImg" class="tui-goods-img"></image>
				<view class="tui-goods-center">
					<view class="tui-goods-name">{{ detail.productName }}</view>
					<view class="tui-goods-attr">数量：1</view>
				</view>
				<view class="tui-price-right">
					<view>￥{{ detail.productGroupPrice || '' }}</view>
				</view>
			</view>
		</view>

		<view v-if="!detail.lotteryCode && detail.participationNum !== detail.productPortionNum" class="result">
			<view class="result-title">等待开奖：{{ detail.participationNum }}/{{ detail.productPortionNum }}</view>
			<view class="result-process"><lion-process :process="detail.process"></lion-process></view>
		</view>
		<view v-if="!detail.lotteryCode && detail.participationNum == detail.productPortionNum" class="result">等待开奖...</view>
		<view v-if="detail.lotteryCode && detail.winningFlag == 'y'" class="result-one">恭喜你已中奖了</view>
		<view v-if="detail.lotteryCode" class="result">开奖码：{{ detail.lotteryCode }}</view>

		<image v-if="detail.lotteryCode && !(detail.winningFlag == 'y')" class="imgss" src="/static/icons/nozhongjiang.png" mode=""></image>

		<view @click="handleSetting" v-if="detail.productGroupOrderState == 'waitSet' && detail.winningFlag == 'y'" class="result-one" style="height: 100upx;">选择收货地址</view>
		<view v-if="detail.userExpressVo" class="dongtai-title">收货地址：</view>
		<view v-if="detail.userExpressVo" class="dongtai1">
			<view class="item">
				<view class="item-left">{{ detail.userExpressVo.realName }}</view>
				<view style="color: #848484;" class="item-right ">{{ detail.userExpressVo.mobilePhone }}</view>
			</view>
			<view class="item">
				<view style="color: #848484;" class="item-left tebei">
					{{ detail.userExpressVo.province + detail.userExpressVo.city + (detail.userExpressVo.district || '') + detail.userExpressVo.addressDetail }}
				</view>
			</view>
			<view class="item">
				<view class="item-left">订单状态</view>
				<view class="item-right blue">{{ detail.userExpressVo.expressState == 'y' ? '已发货' : '等待系统处理' }}</view>
			</view>
			<view class="item">
				<view class="item-left">物流详情</view>
				<view class="item-right">{{ detail.userExpressVo.expressName || '无' }}</view>
			</view>
			<view class="item">
				<view class="item-left">快递单号</view>
				<view class="item-right">{{ detail.userExpressVo.expressCode || '无' }}</view>
			</view>
		</view>
		<view class="result-three">
			<view class="result-three-left">我的参与码</view>
			<!-- <view @click="navDetail(detail)" class="result-three-right">产品详情</view> -->
		</view>
		<view class="result-two">
			<view :key="index" v-if="more ? true : index < 4" v-for="(item, index) in detail.productGroupCodes">{{ item }}</view>
			<view v-if="detail.productGroupCodes && detail.productGroupCodes.length > 3" @click="more = !more" class="more">{{ more ? '收起' : '查看更多' }}</view>
		</view>

		<view style="height: 80upx;"></view>
		<Loading v-if="loading"></Loading>
	</view>
</template>

<script>
import { productGroupDetail, groupSetAddress } from '@/service/shop.js';
export default {
	data() {
		return {
			pageNum: 1,
			loadding: false,
			detail: {},
			more: false,
			loading: true
		};
	},
	onLoad({ id }) {
		this.id = id;
		this.getDetail();
		this.$store.state.address = null;
	},
	onShow() {
		const address = this.$store.state.address;
		if (address) {
			groupSetAddress({ userAddressId: address.id, id: this.detail.id }, { loading: true }).then(v => {
				this.$store.state.address = null;
				this.getDetail();
			});
		}
	},
	methods: {
		async getDetail() {
			try {
				this.loading = true;
				this.detail = await productGroupDetail({ id: this.id });

				this.detail.process = ((Number(this.detail.participationNum) / Number(this.detail.productPortionNum)) * 100).toFixed(0);
			} finally {
				this.loading = false;
			}
		},
		handleSetting() {
			uni.navigateTo({
				url: '/pages/shop/address/address?type=' + 'select'
			});
		},
		navDetail(item) {
			uni.navigateTo(
				{
					url: '/pages/shop/productDetail/index'
				},
				{
					id: item.id,
					type: 'group',
					noNav: true
				}
			);
		}
	}
};
</script>

<style scoped lang="scss">
.container {
	min-height: 100vh;
	padding-bottom: env(safe-area-inset-bottom);
	background: linear-gradient(to bottom, #25c3ff, #009fff);
}

.tui-order-list {
	margin-top: 80rpx;
}

.tui-order-item {
	background-color: #ffffff;
	border-radius: 20rpx;
	margin: 20upx auto 0;
	width: 710upx;
	overflow: hidden;
}

.tui-goods-title {
	width: 100%;
	font-size: 28rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.tui-order-status {
	color: #888;
	font-size: 26rpx;
}
.result {
	background-color: #ffffff;
	border-radius: 20rpx;
	margin: 20upx auto 0;
	width: 710upx;
	// height: 140upx;
	padding: 30upx 0;
	// border: 2upx solid #1688b5;
	color: #25c3ff;
	font-size: 42upx;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.result-one {
	// background: linear-gradient(to bottom, #ffeb81, #ffe538);
	background: #ffffff;
	border-radius: 20rpx;
	margin: 20upx auto 0;
	width: 710upx;
	// height: 140upx;
	padding: 30upx 0;
	// border: 2upx solid #1688b5;
	color: #ff7030;
	font-size: 42upx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.result-title {
	color: #888;
	font-size: 30upx;
}
.imgss {
	width: 710upx;
	height: 140upx;
	margin: 20upx auto 0;
}
.result-process {
	margin-top: 4upx;
	width: 660upx;
	height: 40upx;
}
.result-two {
	background-color: #ffffff;
	border-radius: 20rpx;
	padding: 40upx 0;
	margin: 20upx auto 0;
	width: 710upx;
	// height: 140upx;
	// border: 2upx solid #1688b5;
	color: #535353;
	font-size: 42upx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.result-three {
	width: 710upx;
	display: flex;
	margin: 20upx auto 0;
	justify-content: space-between;
}
.result-three-left {
	// background: linear-gradient(to bottom, #ffeb81, #ffe538);
	background: linear-gradient(to bottom, #25c3ff, #009fff);
	border-radius: 20rpx;
	// width: 350upx;
	width: 100%;
	height: 80upx;
	// border: 2upx solid #1688b5;
	color: #ffffff;
	font-size: 32upx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.result-three-right {
	background-color: #ffffff;
	border-radius: 20rpx;
	width: 350upx;
	height: 80upx;
	// border: 2upx solid #1688b5;
	color: #25c3ff;
	font-size: 32upx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.tui-goods-item {
	width: 100%;
	padding: 30rpx 30rpx;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
}

.tui-goods-img {
	margin-right: 30upx;
	width: 180rpx;
	height: 180rpx;
	display: block;
	flex-shrink: 0;
}

.tui-goods-center {
	flex: 1;
	padding: 20rpx 8rpx;
	box-sizing: border-box;
}

.tui-goods-name {
	max-width: 310rpx;
	word-break: break-all;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-size: 26rpx;
	line-height: 32rpx;
}

.tui-goods-attr {
	font-size: 22rpx;
	color: #888888;
	// line-height: 32rpx;
	padding-top: 10rpx;
	word-break: break-all;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.tui-price-right {
	text-align: right;
	font-size: 32rpx;
	color: #ff7030;
	line-height: 30rpx;
	padding-top: 30rpx;
}

.tui-color-red {
	color: #5677fc;
	padding-right: 30rpx;
}

.tui-goods-price {
	width: 100%;
	display: flex;
	color: #818181;
	align-items: flex-end;
	justify-content: flex-end;
	font-size: 24rpx;
}

.tui-size-24 {
	font-size: 24rpx;
	line-height: 24rpx;
}

.tui-price-large {
	font-size: 32rpx;
	line-height: 30rpx;
	font-weight: 500;
}

.tui-order-btn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	background: #fff;
	padding: 10rpx 30rpx 20rpx;
	box-sizing: border-box;
}

.tui-btn-ml {
	margin-left: 20rpx;
}
.lion-process {
	height: 18upx;
	width: 300upx;
}
.more {
	color: $primary;
	margin-top: 20upx;
	font-size: 30upx;
}
.dongtai1 {
	margin: 20upx auto 0;
	box-sizing: border-box;
	width: 710upx;
	border-radius: 20upx;
	background-color: #ffffff;
	padding: 20upx 30upx;
	.item {
		display: flex;
		justify-content: space-between;
		color: #434343;
		font-size: 30upx;
		margin: 14upx 0;
		.item-left {
		}
		.item-right {
		}
	}
}
.dongtai-title {
	margin-left: 20upx;
	margin-top: 20upx;
	font-size: 36upx;
	font-weight: 500;
	color: #ffffff;
}
.blue {
	color: $primary;
}
.tebei {
	margin-top: 10upx;
	padding-bottom: 20upx;
	width: 100%;
	border-bottom: 1upx solid #e6e6e6;
}
</style>
